---
title: Meteors
date: 2023-07-13
description: A meteor shower effect.
author: dillionverma
published: true
video: https://cdn.magicui.design/meteors.mp4
---

<ComponentPreview name="meteors-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/meteors
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="meteors" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

```css title="app/globals.css" showLineNumbers {2, 4-15}
@theme inline {
  --animate-meteor: meteor 5s linear infinite;

  @keyframes meteor {
    0% {
      transform: rotate(var(--angle)) translateX(0);
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      transform: rotate(var(--angle)) translateX(-500px);
      opacity: 0;
    }
  }
}
```

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { Meteors } from "@/components/ui/meteors"
```

```tsx showLineNumbers
<div className="relative h-[500px] w-full overflow-hidden">
  <Meteors />
</div>
```

## Props

### Meteors

| Prop          | Type     | Default | Description                                             |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `number`      | `number` | `20`    | Number of meteors                                       |
| `minDelay`    | `number` | `0.2`   | Minimum delay in seconds before meteor animation starts |
| `maxDelay`    | `number` | `1.2`   | Maximum delay in seconds before meteor animation starts |
| `minDuration` | `number` | `2`     | Minimum duration in seconds for meteor animation        |
| `maxDuration` | `number` | `10`    | Maximum duration in seconds for meteor animation        |
| `angle`       | `number` | `215`   | Angle in degrees for meteor trajectory                  |
| `className`   | `string` | -       | Optional additional CSS classes                         |
